<template>
  <el-dialog
    class="orderlist_dialog"
    v-model="orderState.filterdialog"
    :show-close="false"
    width="700"
    @open="handleOpen"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="orderlist_dialog_header">
        <div :id="titleId" :class="titleClass" class="title">{{languageJson.order.screen}}</div>
        <img
          src="@/assets/setting/close.png"
          style="width: 16px; height: 16px; cursor: pointer"
          @click="close"
          alt=""
        />
      </div>
      <div class="orderlist_bg"></div>
    </template>
    <div class="orderlist_dialog_content">
      <el-form :model="orderState.filterForm" label-width="auto">
        <el-form-item :label="`${languageJson.order.startingEndingTime}:`">
          <el-date-picker
            v-model="orderState.filterForm.order_time"
            class="datapicker_orderlist"
            type="datetimerange"
            :start-placeholder="languageJson.order.startTime"
            :end-placeholder="languageJson.order.endTime"
            :clearable="false"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            style="width: 300px"
          >
            <template #range-separator>
              <img src="@/assets/order/time-2.png" style="width: 12px; height: 12px; margin: 0 8px" alt="" />
            </template>
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="`${languageJson.order.play}:`">
          <el-select v-model="orderState.filterForm.sport_type" style="width: 300px">
            <el-option :label="languageJson.home.soccer" value="soccer" />
            <el-option :label="languageJson.home.basketball" value="basketball" />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${languageJson.order.league}:`">
          <el-select
            v-model="orderState.filterForm.league_name"
            style="width: 300px"
            @change="orderStore.changeleaguename()"
          >
            <el-option :label="languageJson.home.all" value="all" />
            <el-option
              v-for="(value, key) in orderState.leaguefilter"
              :key="key"
              :label="value.league"
              :value="value.league"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${languageJson.home.match}:`">
          <el-select v-model="orderState.filterForm.homeaway" style="width: 300px">
            <el-option :label="languageJson.home.all" value="all" />
            <el-option
              v-for="(item, index) in orderState.matchfilter"
              :key="index"
              :label="`${item.home}-vs-${item.away}`"
              :value="`${item.home}-vs-${item.away}`"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${languageJson.order.matchStartingEndingTime}:`">
          <el-date-picker
            v-model="orderState.filterForm.match_time"
            class="datapicker_orderlist"
            type="datetimerange"
            :start-placeholder="languageJson.order.startTime"
            :end-placeholder="languageJson.order.endTime"
            :clearable="false"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            style="width: 300px"
          >
            <template #range-separator>
              <img src="@/assets/order/time-2.png" style="width: 12px; height: 12px; margin: 0 8px" alt="" />
            </template>
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="订单类型:">
          <el-input v-model="value" style="width: 300px" />
        </el-form-item> -->
        <el-form-item :label="`${languageJson.order.orderState}:`">
          <el-select v-model="orderState.filterForm.order_status" style="width: 300px">
            <el-option
              v-for="(item, index) in orderState.status"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="form_buttons">
        <el-button class="button1" @click="orderStore.filterReset()">{{languageJson.order.reset}}</el-button>
        <el-button class="button2" @click="orderStore.clicksubmit()">{{languageJson.order.confirm}}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { http } from '@/utils/http'
const { orderStore, orderState } = inject('OrderStore')
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const handleOpen = () => {
  console.log(orderState.filterForm)
}

const submit = () => {
  console.log(orderState.filterForm)
}
</script>

<style lang="scss" scoped>
.orderlist_dialog_content {
  margin: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.form_buttons {
  padding: 24px 0;
  width: 100%;
  display: flex;
  justify-content: center;

  .button1,
  .button1:hover {
    width: 120px;
    height: 32px;
    border-radius: 0;
    background-color: #f3f5fd;
    border-color: #f3f5fd;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #000;
  }

  .button2,
  .button2:hover {
    width: 120px;
    height: 32px;
    border-radius: 0;
    background-color: #3711d8;
    border-color: #3711d8;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #fff;
  }
}
</style>

<style>
.orderlist_dialog {
  border-radius: 0;
  padding: 0;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.orderlist_dialog .el-dialog__header {
  padding: 0;
}
.orderlist_dialog_header {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  height: 80px;
  position: relative;
  z-index: 2;
}
.orderlist_dialog_header .title {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.orderlist_bg {
  width: 100%;
  height: 80px;
  background-image: url('@/assets/order/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  top: 0;
}

.orderlist_dialog_content .el-form-item {
  margin-bottom: 16px;
}
.orderlist_dialog_content .el-form-item__label {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  text-align: right;
  color: #000;
}
.orderlist_dialog_content .el-input__wrapper {
  height: 32px;
  min-height: 32px;
  background-color: #f3f5fd !important;
  border-color: #f3f5fd;
  box-shadow: none;
  padding: 8px;
}
.orderlist_dialog_content .el-input__inner {
  height: 32px;
  min-height: 32px;

  padding: 8px;
}

.orderlist_dialog_content .el-select__wrapper {
  height: 32px;
  min-height: 32px;
  background-color: #f3f5fd !important;
  border-color: #f3f5fd;
  box-shadow: none;
}

.datapicker_orderlist {
  border-radius: 0;
}
.datapicker_orderlist .el-range__close-icon,
.datapicker_orderlist .el-range__icon {
  display: none;
}
.datapicker_orderlist::before {
  content: '';
  position: absolute;
  background-image: url('@/assets/order/calendar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  right: 8px;
  width: 16px;
  height: 16px;
}
.datapicker_orderlist .el-range-input:first-of-type {
  margin-left: -20px !important;
}
</style>
